import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { ListInfo, LoadMore, Test } from '../style';
import * as actionCreators from '../store/actionCreators';

const List = () => {
  const dispatch = useDispatch();
  const scroll = useRef(null);
  const history = useHistory();
  const articleList = useSelector((state:any) => state.getIn(['home', 'articleList']));

  const handleLoadMore = () => {
    dispatch(actionCreators.loadMoreRecommendList('北京'));
  };

  const handleRouteToDetail = () => {
    history.push({
      pathname: '/detail',
      search: '?id=1',
    });
  };

  useEffect(() => {
    (scroll as any).current.scrollTop = 7;
  }, []);

  const handleScroll = () => {
    console.log((scroll as any).current.scrollTop);
  };
  return (
    <>
      <Test onScroll={handleScroll} ref={scroll}>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
        <h1>1234</h1>
      </Test>
      {
          articleList.map((item:any) => (
            <ListInfo onClick={handleRouteToDetail} key={item.getIn(['id'])}>
              {item.getIn(['content'])}
            </ListInfo>
          ))
        }
      <LoadMore onClick={handleLoadMore}>加载更多</LoadMore>
    </>
  );
};

export default List;
